<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/head::head('组卷系统后台 | 试题管理')"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!--Main Header -->
    <div th:replace="/include/back_header::header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="/include/back_sidebar::sidebar"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                基本信息表
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">商品管理</a></li>
                <li class="active"><img src=""></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>题干</th>
                                    <th>类型</th>
                                    <th>所属章节</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                    <th>难度</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="ques,memberStat:${questionResult.questionShowList}">
                                    <td th:text="${ques.quesContent}"></td>
                                    <td th:text="${ques.newType}"></td>
                                    <td th:text="${ques.newSection}"></td>
                                    <td th:text="${ques.newCreator}"></td>
                                    <td th:text="${ques.newCreateTime}"></td>
                                    <td th:text="${ques.quesLevel}"></td>
                                    <td th:text="${ques.newStatus} " ></td>
                                    <td class="col-operate">
                                        <button type="button" class="btn btn-modify btn-warning btn-sm"
                                                data-toggle="modal"
                                                data-target="#modal-default" th:onclick="modify([[${ques.quesId}]],[[${ques.newStatus}]],
                                                [[${ques.newType}]],[[${ques.quesLevel}]],[[${ques.quesContent}]],[[${ques.quesAnswer}]],
                                                [[${ques.quesDescribe}]],[[${ques.newCreator}]],[[${ques.newCreateTime}]],[[${ques.newModifor}]],
                                                [[${ques.newModifyTime}]])">修改
                                        </button>
                                        <button type="button" class="btn btn-delete btn-danger btn-sm" th:onclick="deleteQuestion(this,[[${ques.quesId}]])">删除</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                    <!--modal-->
                    <div class="modal fade" id="modal-default">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">查看&&修改用户信息</h4>
                                </div>
                                <form role="form" th:action="@{/question-modify}" method="post">
                                    <div class="modal-body">
                                        <table style="width: 100%">
                                            <tbody>
                                            <tr id="trId">
                                                <td width="20%">题目编号:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="quesId" id="quesId" >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">题干:</td>
                                                <td width="80%"><textarea class="form-control"
                                                                          name="quesContent" id="quesContent" style="height: 150px" placeholder="填写试题题干"></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">答案:</td>
                                                <td width="80%"><textarea class="form-control"
                                                                          name="quesAnswer"
                                                                          id="quesAnswer" style="height: 150px" placeholder="填写试题答案"></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">解析:</td>
                                                <td width="80%"><textarea class="form-control"
                                                                          name="quesDescribe"
                                                                          id="quesDescribe" style="height: 150px" placeholder="填写试题解析"></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">状态:</td>
                                                <td width="80%">
                                                    <select id="quesStatus" name="quesStatus"
                                                            class="form-control">
                                                        <option th:each="dic,memberStat:${questionResult.status}"
                                                                th:value="${dic.dicId}"
                                                                th:text="${dic.dicValue}"></option>
                                                    </select>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td width="20%">类型:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="quesType"
                                                                       id="quesType" readonly="readonly">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">难度:</td>
                                                <td width="80%"><input type="text" class="form-control"
                                                                       name="quesLevel"
                                                                       id="quesLevel" placeholder="重设试题难度（0,1）">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">创建人:</td>
                                                <td width="80%"><input type="text" class="form-control" name="quesCreator"
                                                                       id="quesCreator" readonly="readonly">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">创建时间:</td>
                                                <td width="80%"><input type="text" class="form-control" name="quesCreateTime"
                                                                       id="quesCreateTime" readonly="readonly">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">最后修改人:</td>
                                                <td width="80%"><input type="text" class="form-control" name="quesModifor"
                                                                       id="quesModifor" readonly="readonly">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="20%">最后修改时间:</td>
                                                <td width="80%"><input type="text" class="form-control" name="quesModifyTime"
                                                                       id="quesModifyTime" readonly="readonly">
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                            Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">提交修改</button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- Main Footer -->
    <div th:replace="/include/back_footer::footer"></div>

</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<div th:replace="include/javascript::javascript"></div>
<!-- page script -->
<script>
    $(function () {
        $("#question-branch").addClass("active");
        $("#trId").hide();
        $('#example').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'bAutoWidth': false,
            'info': true,
            'autoWidth': false,
            'aLengthMenu':[7,10,20],
            'columnDefs': [
                {
                    "targets": [0],
                    "Sorting": false,
                    "render": function (data, type, row, meta) {
                        // var order1 = meta.settings._iDisplayStart + meta.row + 1;
                        // var order2 = order1 + '、';
                        return type === 'display' && data.length > 20 ?
                            '<span title="' + data + '">' + data.substr(0, 16) + '...</span>' :  data;
                    }
                },

            ]
        });
    });

    function deleteQuestion(obj,id){
        var table = $("#example").DataTable();
        var row = table.row($(obj).parents('tr'));
        layer.confirm('确定删除这道试题吗', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                type: "POST",
                url: "/question-delete",
                data: {id: id},
                dataType: "json",
                success: function (msg) {
                    if(msg["ok"]){
                        layer.msg("操作成功", {time: 700}, function () {
                            //  window.location.reload();
                            row.remove().draw();
                        });
                    }else {
                        layer.msg("删除失败");
                    }
                }
            });
            layer.close(index);
        });
    };
    function modify(Id,Status,
                    Type,Level,Content,Answer,Describe,Creator,CreateTime,Modifor,ModifyTime) {
        $("#quesId").val(Id);
        var typeSelect = $("#quesStatus").find("option");
        var type;
        for (var i = 0; i < typeSelect.length; i++) {
            type = typeSelect.eq(i).text();
            if (Status == type) {
                type = typeSelect.eq(i).val();
                break;
            }
        }
        $("#quesStatus").val(type);
        $("#quesType").val(Type);
        $("#quesLevel").val(Level);
        $("#quesContent").val(Content);
        $("#quesAnswer").val(Answer);
        $("#quesDescribe").val(Describe);
        $("#quesCreator").val(Creator);
        $("#quesCreateTime").val(CreateTime);
        $("#quesModifor").val(Modifor);
        $("#quesModifyTime").val(ModifyTime);

    };

    $(".sidebar-menu li").click(function (e) {
        $(".sidebar-menu li").removeClass("active");
        $(this).addClass("active");
    });
</script>
</body>
</html>